// 招聘职位组件
<template>
  <div class="recruitPosition">
    <div class="recruitmentPostInfo">
      <div class="subTitle">
        <span>招聘职位</span>
      </div>
      <div class="content" v-for="(jobOutVo, index) in jobOutVoList" :key="index">
        <div class="jobInfo">
          <span class="job" @click="jobToDetais(jobOutVo)">{{jobOutVo.name}}</span>
          <div class="education">
            <!-- <span class="wages">{{jobOutVo.wageText}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>{{jobOutVo.workAreaText || '地区不限'}}&nbsp;&nbsp;</span>|
            <span>{{jobOutVo.workExpText || '经验不限'}}&nbsp;&nbsp;</span>|
            <span>{{jobOutVo.educationText || '学历不限'}}</span> -->
            <span class="wages pr20">{{jobOutVo.wageText}}</span>
            <span class="prev-line">{{jobOutVo.workAreaText || '地区不限'}}</span>
            <span class="prev-line">{{jobOutVo.workExpText || '经验不限'}}</span>
            <span class="prev-line">{{jobOutVo.educationText || '学历不限'}}</span>
          </div>
          <div class="tag-group">
            <el-tag type="info" effect="plain" v-for="(subItem, i) in jobOutVo.allureText.slice(0, 4)" :key="i">
              {{subItem}}</el-tag>
          </div>
        </div>
        <div class="companyProfile">
          <div class="company">{{jobOutVo.companyInfo.name || '暂无'}}</div>
          <div class="scale">
            <span class="prev-line">{{jobOutVo.companyInfo.natureText || '暂无'}}</span>
            <span class="prev-line">{{jobOutVo.companyInfo.scaleText || '暂无'}}</span>
            <!-- <span>{{jobOutVo.companyInfo.natureText || '暂无'}}&nbsp;&nbsp;</span>|
            <span>{{jobOutVo.companyInfo.scaleText || '暂无'}}</span> -->
          </div>
          <div class="oneApply">
            <span class="collection" ref="collectDom" @click="getCollection(jobOutVo, index)"
              v-show="!jobOutVo.favorite">
              <img src="../../../assets/img/shoucang.png" alt /> &nbsp;收藏
            </span>
            <span class="collection active" ref="collectDom" @click="cancelCollection(jobOutVo, index)"
              v-show="jobOutVo.favorite">
              <img src="../../../assets/img/quxiaoshoucang.png" alt /> &nbsp;已收藏
            </span>
            <el-button type="primary" class="oneApply-btn" @click="oneDeliverSaveDialog(jobOutVo)">一键申请</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :current-page="currentPage" :total="total" :page-size="5"
        @current-change="currentChange"></el-pagination>
    </div>
    <!-- 选择 简历弹框 -->
    <el-dialog width="30%" :visible.sync="dialogVisible" class="elDialog" :append-to-body="false"
      :before-close="closeResume">
      <p slot="title" class="selectResumeHeader">
        <span>请选择投递的简历</span>
      </p>
      <div class="elDialog-content">
        <el-row>
          <el-select v-model="selectedResume" placeholder="请选择" popper-class="popper-class">
            <el-option v-for="item in resumelist" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
          <div class="checkouts">
            <el-checkbox v-model="resumeChecked">将该份简历设置为快速投递(推荐)</el-checkbox>
          </div>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="immediateDelivery">立即投递</el-button>
      </div>
    </el-dialog>
    <!-- feat:该岗位为樟树市人才服务代招职位，如需投递请联系招聘负责人。 -->
    <el-dialog :visible.sync="isJobType" class="elDialog jonDz" width="30%" style="margin-top:15vh"
      :before-close="closeResume">
      <p slot="title" class="selectResumeHeader">
        <span>申请职位</span>
      </p>
      <p class="jobItem">该岗位为樟树市人才服务代招职位，如需投递请联系招聘负责人。</p>
      <p class="jobItem">联系人：{{paramObj.contact || '暂无'}}</p>
      <p class="jobItem">联系电话：{{paramObj.phone || '暂无'}}</p>
      <p class="jobItem">座机：{{paramObj.tel || '暂无'}}</p>
      <p class="jobItem">联系邮箱：{{paramObj.mail || '暂无'}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeResume">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list, Collection, cancelCollection, gitInterface, deliverSave, isExpress } from '../../../api/index.js';
export default {
  name: 'recruitPosition',
  data () {
    return {
      url: '',
      // 职位列表集合
      jobOutVoList: [],
      // 当前页
      currentPage: 1,
      total: 0,
      // 展示当前企业所有上线的职位，按刷新时间倒序（刷新时间最新的在最上方）排序
      sort: [{ column: 'refresh_time', type: 'desc' }],
      // 简历列表
      resumelist: [],

      // 参数
      jobId: '',
      userId: '',
      companyId: '', // 公司id
      resumeId: '', // 简历id
      paramObj: {},

      // 简历弹框 隐藏显示 开关
      dialogVisible: false,
      // 选中的简历
      selectedResume: '',
      // 将该份简历设置为快速投递
      resumeChecked: false,
      // feat：控制代招职位的弹框
      isJobType: false,
    };
  },
  created () {
    this.companyId = this.$route.query.companyId;
    // 获取默认路径
    this.url = process.env.BASE_URL;
    this.userId = localStorage.getItem('ps_userId');
  },
  mounted () {
    this.getList();
  },
  methods: {
    // 获取职位列表
    getList () {
      //开启loading
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let companyId = [];
      let a = {};
      a.column = 'company_id';
      a.type = 'eq';
      a.value = this.companyId;
      companyId.push(a);

      let status = {};
      status.column = 'status';
      status.type = 'eq';
      status.value = 1;
      companyId.push(status);
      companyId.push({ "column": "include", "type": "", "value": "D,CI,F" })
      var formData = new FormData();
      formData.append('page', this.currentPage);
      formData.append('size', 5);
      formData.append('sort', JSON.stringify(this.sort));
      formData.append('condition', JSON.stringify(companyId));
      list(formData).then(res => {
        if (res.success) {
          loading.close();
          var data = [];
          if (res.data.records) {
            data = res.data.records || [];
          }
          data.map(item => {
            if (item.allureText) {
              item.allureText = item.allureText.split(',');
            }
          });
          this.jobOutVoList = res.data.records || [];
          this.total = res.data.total;
        } else {
          loading.close();
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // <<< ------------------------------  点击事件 ------------------------------->>>
    // 点击一键申请
    oneDeliverSaveDialog (jobOutVo) {
      if (!localStorage.getItem('ps_Authorization')) {
        this.$message.error('您还没有登录，请先进行登录');
        // let that = this;
        // setTimeout(() => {
        //   window.location.href = that.url + '/person/#/login';
        // }, 3000);
        return false;
      }
      console.log(jobOutVo, '一键申请');
      this.jobId = jobOutVo.id; // 获取jobId;
      this.paramObj = jobOutVo;
      if (jobOutVo.jobType == 1) { // 代招职位
        this.isJobType = true;
      } else {
        gitInterface().then(res => {
          console.log(res, '查看简历列表');
          let isFlag = false; // 设置变量开关 如果有默认简历 则为true 没有则为false
          if (res.success) {
            res.data.forEach(item => {
              // express = ture 为 默认简历
              if (item.express) {
                isFlag = true;
                this.resumeId = item.id; // 简历id
              }
            });
            if (isFlag) {
              // 有设置默认投递，则直接申请，不显示弹框, 如果没有默认设置则点击投递操作的时候就需要求职者选择一份自己的简历投递
              //申请职位
              this.getApplyPosition();
            } else {
              this.dialogVisible = true;
            }

            this.resumelist = res.data;
          } else {
            console.log('错误');
          }
        });
      }

    },
    // 点击收藏
    getCollection (jobOutVo, index) {
      // userId 登陆了判断有没有进行收藏
      if (!localStorage.getItem('ps_Authorization')) {
        this.$message.error('您还没有登录，请先进行登录');
        // let that = this;
        // setTimeout(() => {
        //   window.location.href = that.url + '/person/#/login';
        // }, 3000);
        return false;
      }
      this.jobId = jobOutVo.id;
      let companyId = this.companyId;
      let query = new FormData();
      query.append('jobId', this.jobId);
      query.append('companyId', companyId);
      query.append('userId', this.userId);
      Collection(query).then(res => {
        if (res.success) {
          this.$message.success(`收藏成功`);
          this.isCollect = true;
          this.jobOutVoList[index].favorite = true;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 取消收藏
    cancelCollection (jobOutVo, index) {
      if (!localStorage.getItem('ps_Authorization')) {
        this.$message.error('您还没有登录，请先进行登录');
        // let that = this;
        // setTimeout(() => {
        //   window.location.href = that.url + '/person/#/login';
        // }, 3000);
        return false;
      }
      this.jobId = jobOutVo.id;
      let query = new FormData();
      query.append('jobId', this.jobId);
      query.append('userId', this.userId);
      cancelCollection(query).then(res => {
        if (res.success) {
          this.$message.success(`取消收藏成功`);
          this.jobOutVoList[index].favorite = false;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 申请职位
    getApplyPosition () {
      //   [{jobId: "7",companyId: "99be9bc7bf9f9d2d9cb7b83d99e8958a"},{jobId: "4",companyId: "99be9bc7bf9f9d2d9cb7b83d99e8958a"}]
      let idArr = [
        {
          jobId: this.jobId,
          companyId: this.companyId
        }
      ];
      // var formData = new FormData();
      // formData.append('dataJson', JSON.stringify(idArr));
      // formData.append('userId', localStorage.getItem('ps_userId'));
      // formData.append('resumeId', this.resumeId);
      let formData = {
        "resumeId": this.resumeId,
        "dataJson": idArr
      }
      // 申请职位
      deliverSave(formData).then(res => {
        if (res.success) {
          // this.$message({
          //   message: '恭喜你，一键申请成功!',
          //   type: 'success'
          // });
          this.dialogVisible = false;
          if (this.resumeChecked) {
            //  调用是否默认简历头覅
            this.updateExpress();
          } else {
            this.selectedResume = '';
          }
          this.$router.push({
            path: '/resumeDeliveredSuccess',
            query: { category: '' }
          });
        } else {
          this.$message.error(`${res.msg}`);
          this.selectedResume = '';
          this.resumeChecked = false;
        }
      });
    },
    // 点击立即投递
    immediateDelivery () {
      // if (!localStorage.getItem('ps_Authorization')) {
      //   this.$message.error('您还没有登录，请先进行登录');
      //   let that = this;
      //   setTimeout(() => {
      //     window.location.href = that.url + '/person/#/login';
      //   }, 3000);
      //   return false;
      // }
      if (!this.selectedResume) {
        this.$message.error('请选择简历');
        return false;
      }
      this.resumeId = this.selectedResume;
      this.getApplyPosition();
    },
    // 是否默认设置为此建立为快速投递投递简历
    updateExpress () {
      let obj = {
        express: this.resumeChecked,
        id: this.selectedResume
      };
      isExpress(obj).then(res => {
        if (res.success) {
          this.dialogVisible = false;
          console.log('设置未默认简历成功');
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    // 关闭弹框
    closeResume () {
      this.dialogVisible = false;
      this.selectedResume = '';
      this.resumeChecked = false;
      this.isJobType = false;
    },
    currentChange (currentPage) {
      this.currentPage = currentPage;
      this.getList();
    },
    // 点击职位名称跳转职位详情页
    jobToDetais (obj) {
      const { href } = this.$router.resolve({
        path: "/JobHunting/jobdetail",
        query: {
          id: obj.id,
          category: obj.category
        }
      });
      window.open(href, '_blank');
    }
  }
};
</script>
<style lang="css" scoped>
.recruitPosition {
    /* border: 1px solid red; */
}
.pr20 {
    padding-right: 20px;
}
.recruitmentPostInfo .subTitle {
    width: 100%;
    box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    /* width: 56px; */
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.recruitmentPostInfo .subTitle span:first-child::after {
    width: 28px;
    height: 2px;
    background: #1893fc;
    content: '';
    display: block;
    margin-top: 3px;
    margin-bottom: 20px;
}
.companyInfo .content {
    margin-top: 18px;
    min-height: 360px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 26px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    text-indent: 2em;
    overflow-y: auto;
}
/* 招聘职位基本信息 */
.recruitmentPostInfo {
    padding-top: 35px;
}
.recruitmentPostInfo .subTitle {
    margin-bottom: 18px;
}
.recruitmentPostInfo .content {
    height: 140px;
    margin-bottom: 12px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.recruitmentPostInfo .jobInfo {
    flex: 1;
}
.recruitmentPostInfo .tag-group {
    margin: 3px 0;
}
.jobInfo .job,
.companyProfile .company {
    display: inline-block;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: #333333;
}
.jobInfo .job {
    cursor: pointer;
}
.jobInfo .job:hover {
    color: #2d8cf0;
}
.jobInfo .education,
.companyProfile .scale {
    color: #555555;
    padding-top: 37px;
    padding-bottom: 20px;
}
.jobInfo .education span,
.companyProfile .scale span {
    width: 42px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: #555555;
}
.jobInfo .education .prev-line:nth-child(n + 3)::before,
.companyProfile .scale .prev-line:not(:first-child)::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin: -2px 10px 0;
    width: 1px;
    height: 12px;
    background-color: #707070;
}
.jobInfo .education .wages {
    width: 51px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: #fd4e40;
}
.recruitmentPostInfo .companyProfile {
    text-align: right;
}
.companyProfile .oneApply {
    margin: 3px 0;
}
.companyProfile .oneApply img {
    width: 17px;
    height: 16px;
    vertical-align: baseline;
}
.oneApply .oneApply-btn {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.companyProfile /deep/ .el-button--small,
.el-button--small.is-round {
    padding: 4px 15px;
}
.companyProfile .collection {
    width: 28px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    margin-right: 40px;
    vertical-align: middle;
    cursor: pointer;
}
.companyProfile .collection .el-icon-star-on {
    color: #1893fc;
}
.companyProfile .collection.active {
    color: #1893fc;
}
.el-tag.el-tag--info {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    margin-right: 10px;
}
.jonDz /deep/ .el-dialog__header {
    border-bottom: 1px solid #e5e5e5;
}
.jonDz /deep/ .el-dialog__footer {
    padding: 40px 20px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jobItem {
    margin-bottom: 10px;
}
/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 124px;
    text-align: center;
}
/* 弹框样式 */
.checkouts /deep/ .el-checkbox {
    margin-top: 10px;
}
.elDialog-content {
    height: 100px;
    padding-top: 10px;
    box-sizing: border-box;
}
</style>